<template>
  <el-select
    v-model="selectCityCode"
    placeholder="请选择城市"
    :multiple="props.multiple"
    clearable
    filterable
    @change="onCityChange"
    class="!w-240px"
  >
    <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
  </el-select>
</template>
<script lang="ts" setup>
import { oneOfType } from 'vue-types'
import { propTypes } from '@/utils/propTypes'
import { getCityList } from '@/api/universal/region'

/** 城市选择组件 */
defineOptions({ name: 'CityPicker' })

const props = defineProps({
  modelValue: oneOfType<number | string>([Number, String, Array]),
  multiple: propTypes.bool.def(false)
})

/** 选中的城市编码 */
const selectCityCode = computed({
  get: () => {
    return props.modelValue
  },
  set: (val: number | string) => {
    emit('update:modelValue', val)
  }
})

/** 城市选择 */
const emit = defineEmits(['update:modelValue', 'change'])

const onCityChange = (e: any) => {
  console.log('onCityChange: ' + e)
  emit('change', e)
}

/** 初始化 **/
const cityList = ref<any>([]) // 城市列表
onMounted(async () => {
  // 获得城市列表
  cityList.value = await getCityList()
})
</script>
